import Svg from "@/components/base/Svg"
import { formatCurrency } from "@/utils/format"
import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { useEffect } from "react"
import { EarningsButtonAtom, InviteEarnAtom, MissionPointsAtom } from "../atom"
import EarningsButton from "./EarningsButton"

interface EarningsButtonData {
    color: string
    borderColor: string
    icon?: React.ReactNode | string | null
    name: string
    balance: string
    onClick?: () => void
}

const EarningsContainer = styled.div`
    width: 351rem;
    height: 124rem;
    margin: 8rem auto;
    background-color: #ffffff;
    border-radius: 10rem;
    display: flex;
    flex-direction: column;
`
const EarningsTitle = styled.div`
    width: 327rem;
    height: 24rem;
    line-height: 24rem;
    font-family: SF Pro Text;
    font-weight: 500;
    font-size: 16rem;
    color: #131416;
    margin: 12rem;
`
const EaringsWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
`
export default function RootLayout() {
    const [inviteEarn, setInviteEarn] = useAtom(InviteEarnAtom)
    const [missionPoints, setMissionPoints] = useAtom(MissionPointsAtom)

    const [earningsButton, setEarningsButton] = useAtom<EarningsButtonData[]>(EarningsButtonAtom)
    useEffect(() => {
        setEarningsButton([
            {
                color: "linear-gradient(90deg, #FFFFFF 0%, #FFE6EC 100%)",
                borderColor: "#FFCCD9",
                icon: <Svg src="pages/UserCenterPage/earn1.svg" />,
                name: "Invite Earn",
                balance: `${formattedBalance}`,
            },
            {
                color: "linear-gradient(90deg, #FFFFFF 0%, #FFF4E6 100%)",
                borderColor: "#FFEACC",
                icon: <Svg src="pages/UserCenterPage/earn2.svg" />,
                name: "Mission Points",
                balance: `${missionPoints}`,
            },
        ])
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [setEarningsButton])

    // 格式化余额
    const formattedBalance = formatCurrency(Math.round(inviteEarn), {
        currency: "PHP",
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
    })

    const handleClick = (index: number) => {}

    return (
        <EarningsContainer>
            <EarningsTitle>Yesterday's Earnings</EarningsTitle>
            <EaringsWrapper>
                {earningsButton.map((item, index) => (
                    <EarningsButton
                        key={index}
                        color={item.color}
                        borderColor={item.borderColor}
                        icon={item.icon}
                        name={item.name}
                        balance={item.balance}
                        onClick={() => handleClick(index)}
                    />
                ))}
            </EaringsWrapper>
        </EarningsContainer>
    )
}
